<template>
  <div>
     <div class="one" style="background:#fff;padding:10px 0">
      <div>
        <span style="margin-left:18px; padding-bottom:15px; font-size:18px">
          附件
          <span style="font-size:11px; color:red"></span>
        </span>
      </div>
      <van-uploader v-model="url" :before-read="asyncBeforeRead" accept="*" style="margin-left:18px; margin-top:10px" preview-size="60px" :max-count="1"/>
    </div>

    <!-- 备注 -->
    <div style="background:#f6f6f6;color:#999; padding:5px 16px; padding-top:16px; margin-bottom:70px; font-size:12px">
      <div style="margin-top:5px">备注：</div>
      <div style="margin-top:5px">1、只允许上传一张图片。</div>
      <div style="margin-top:5px">2、只允许上传jpg/png格式的图片！。</div>
    </div>
    <!-- 提交按钮 -->
    <!-- <div class="footer-container">
      <van-button type="info" style="width:100%;" @click="SuubmitData">提交</van-button>
    </div> -->
  </div>
</template>

<script>
import { fileUpload } from "@/api/login";
import qs from 'qs'

export default {
  data(){
    return{
      url:[], //临时变量
      columnsdata:[],
      deptName: JSON.parse(sessionStorage.getItem('deptID')),
      imgURL:'',
      from: {
        memo:'1', //申请人传0 / 审批人传1 （前后端约定）
        userId: '',   //申请人userId
        uploadFile: '', //上传附件 （图片、文件）
      },
    }
  },
  methods: {
    //上传图片
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.length >= 2) {
          this.$toast('每次只能上传一张图片');
          return
        }
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          this.$toast('只允许上传jpg/png格式的图片！');
          reject();
          return false;
        }else{
           this.$dialog.alert({
            message: "上传图片成功！",
          }).then(() => {
            this.from = {};
             this.url = [];
          });
          resolve();
          this.afterRead(file)
        }
      });
    },
    afterRead(file) {
      let formData = new FormData();
      formData.append("file", file);
      formData.append("userid", sessionStorage.getItem('userId'));
      formData.append("memo", '1');
      fileUpload(formData,{headers: { 'Content-Type': 'multipart/form-data' }}).then(res => {
        if(res.data.code == 0){
          this.imgURL = res.data.filePath;
        }else{
          this.$toast('上传附件失败！')
        }
      });
    },
  },
  created(){
  }
}
</script>
<style scoped >
  .form-container{
    width: 100%;
    height: 100%;
    padding-bottom: 300px;
  }
  .one {
    margin-top: 20px;
  }
  
  .footer-container {
    padding: 40px 30px 40px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  .van-cell-group__title {
    font-size: 12px;
    padding: 15px 0;
    padding-left: 30px;
  }
  .add{
    height:70px;
    color: #1989FA;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .person_title{
    display: flex;
    justify-content: space-between;
    color: #999;
  }
  .font_class{
    font-size: 20px !important;
  }
</style>